<template>
    <div>
      <el-input v-model="phoneNumber" placeholder="请输入手机号码" />
      <el-button @click="sendSms">发送短信</el-button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios';
  
  // 手机号和短信模板等配置信息
  const phoneNumber = ref('');
  const accessKeyId = 'yourAccessKeyId';
  const accessKeySecret = 'yourAccessKeySecret';
  const signName = '您的签名';               // 短信签名
  const templateCode = 'SMS_12345678';       // 短信模板ID
  
  // 生成签名的方法
  function generateSignature(params) {
    // 按照阿里云签名规则生成签名，这里可以使用 HMAC-SHA1 签名算法生成签名
    // 注意阿里云短信服务的签名算法可能复杂，因此直接使用 axios 会有限制
    // 实际场景中可以通过后端生成签名并请求发送短信
  }
  
  // 发送短信的方法
  async function sendSms() {
    const params = {
      PhoneNumbers: phoneNumber.value,
      SignName: signName,
      TemplateCode: templateCode,
      TemplateParam: JSON.stringify({ code: '123456' }), // 示例验证码
      AccessKeyId: accessKeyId,
      Timestamp: new Date().toISOString(),
      SignatureMethod: 'HMAC-SHA1',
      SignatureVersion: '1.0',
      SignatureNonce: Math.random().toString(),
      Format: 'JSON',
      Action: 'SendSms',
      Version: '2017-05-25',
    };
  
    // 生成签名
    const signature = generateSignature(params);
    params.Signature = signature;
  
    try {
      const response = await axios({
        method: 'POST',
        url: 'https://dysmsapi.aliyuncs.com/',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data: new URLSearchParams(params),
      });
  
      if (response.data.Code === 'OK') {
        console.log('短信发送成功');
      } else {
        console.error('短信发送失败:', response.data.Message);
      }
    } catch (error) {
      console.error('请求发送短信失败:', error);
    }
  }
  </script>
  